<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象URL</title>
</head>
<body>
    <input type="file" id="files-list" multiple> 
    <img>
    <script>
        let filesList = document.getElementById("files-list");
        let img = document.getElementsByTagName("img").item(0)

        // 通过这种方法一样可以将图片放在页面上
        // 区别在于FileReader需要先将资源读取到javascript中，而对象URL可以直接引用
        filesList.addEventListener("change", (event) => {
            // 初始化reader对象
            let files = event.target.files
            let url = window.URL.createObjectURL(files[0]);
            img.src = url
        })
    </script>
</body>

</html>